<template>
	<view class="feedback__wrap">
		<tabTopBar :title="$t('page.feedback')" :isOpenRightSolt="true" :bgColor="'#132034'">
			<template #right-content>
				<text class="feedback-record"
					@tap="$u.route('/pages/feedback-record/feedback-record')">{{$t('page.feedback.record')}}</text>
			</template>
		</tabTopBar>
		<view class="feedback">
			<view class="card">
				<view class="card__header">
					<text class="card__header-title">{{ $t('feedback.type-title') }}</text>
				</view>
				<view class="card__body">
					<view class="radio-button-group">
						<view v-for="(item, index) in FeedbackType" :key="index" class="radio-button"
							:class="{ 'radio-button--active': selectIndex === index }" @tap="selectIndex = index">
							<text class="radio-button-label">{{ $t(item.name) }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card__header">
					<text class="card__header-title">{{ $t('feedback.content-title')}}</text>
				</view>
				<view class="card__body">
					<up-textarea v-model="formData.content" class="textarea"
						:placeholder="$t('feedback.content-placeholder')" bo border="none"
						:placeholder-style="{ color: '#808080', fontSize: '28rpx'}" height="146rpx" :auto-height="false"
						color="#eee"></up-textarea>
					<up-upload class="upload-input" :fileList="files" sizeType="original" width="160rpx" height="160rpx"
						:max-count="MAX_COUNT" multiple upload-icon="plus" upload-icon-color="#ddd"
						@afterRead="handleSelect" @delete="handleDlete" @error="handleError"></up-upload>
					<view class="limit-tips">
						<text>{{ i18Replace($t('feedback.picture.limit.tips'), { count: MAX_COUNT}) }}</text>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card__header">
					<text class="card__header-title">{{ $t('feedback.contact.information-title') }}</text>
				</view>
				<view class="card__body">
					<up-input v-model="formData.contactInfo" type="text" class="input" border="none"
						:placeholder="$t('feedback.contact.information-placeholder')"
						:placeholder-style="{ color: '#808080', fontSize: '28rpx'}" color="#eee"></up-input>
				</view>
			</view>
			<view class="actions">
				<up-button type="primary" size="large" shape="circle"
					@tap="handleSubmit">{{$t('feedback.submit')}}</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		addFeedback
	} from '@/apis/components/system';
	import {
		FeedbackType
	} from '@/composable/constant/feedback';
	import {
		useI18n
	} from "vue-i18n";
	import {
		uploadFile
	} from '../../apis/components/file';
	import {
		i18Replace
	} from "@/utils/functions.js";
	const {
		t
	} = useI18n()


	const selectIndex = ref(0);
	const MAX_COUNT = 9;
	const beRequest = ref(false);

	const formData = reactive({
		contactInfo: "",
		content: "",
		picture: '',
		type: 0
	})
	const files = ref([]);

	const handleDlete = (event) => {
		files.value.splice(event.index, 1);
	}

	const handleSelect = async ({
		file
	}) => {
		let lists = [].concat(file);
		let fileListLen = files.value.length;
		lists.map((item) => {
			files.value.push({
				...item,
				status: 'uploading',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFile(lists[i].url);
			let item = files.value[fileListLen];
			files.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				url: result,
			});
			fileListLen++;
		}
		if (beRequest.value) {
			beRequest.value = false;
			handleSubmit();
		}
	}

	const handleError = ({
		code,
		errMsg
	}) => {
		if ([2, 11, 12].includes(Number(code)) && !errMsg.includes(
				'User cancelled')) {
			uni.showModal({
				title: t("common.permissionPrompts"),
				content: `${t("common.pleaseGrant")}${code === 12 ? t("common.photoAlbum"): t("common.camera")}${t("common.permissionToUseTheFeature")}`,
				confirmText: t("common.goToSettings"),
				cancelText: t("common.cancel"),
				success: (res) => {
					if (res.confirm) {
						uni.openAppAuthorizeSetting();
					}
				},
			});
		}
	}

	const handleSubmit = async () => {
		try {
			const isUploading = files.value.some(item => item.status === 'uploading');
			if (isUploading) {
				beRequest.value = true;
				return;
			}
			if (!formData.content) {
				uni.$u.toast(t('feedback.contact.warn-1'));
				return;
			}
			formData.type = FeedbackType[selectIndex.value].value;
			formData.picture = files.value.map(item => item.url).join(';');
			await addFeedback(formData, files.value);
			uni.$u.toast(t('feedback.submit.successful.tips'));
			uni.redirectTo({
				url: '/pages/feedback-record/feedback-record'
			})
		} catch (error) {
			uni.showToast({
				icon: "none",
				title: error.message
			});
		}
	}
</script>

<style lang="scss" scoped>
	.feedback {
		padding: 24rpx 32rpx;

		&-record {
			// font-family: PingFangSC;
			font-size: 28rpx;
			line-height: 1;
			letter-spacing: 0.0145em;
			color: #DDDDDD;
		}

		.card {
			padding: 40rpx 32rpx;
			border-radius: 16rpx;
			background-color: #132034;

			&:not(:last-child) {
				margin-bottom: 24rpx;
			}

			&__header {
				@include flex(row);
				align-items: center;
				justify-content: space-between;

				&-title {
					// font-family: PingFangSC;
					font-size: 32rpx;
					line-height: 1;
					letter-spacing: -0.045em;

					color: #BFBFBF;
				}
			}

			&__body {
				margin-top: 30rpx;

				& ::v-deep .u-upload {
					.u-upload__button {
						background-color: #222D49;
						border-radius: 12rpx;
						margin: 0 20rpx 20rpx 0;
					}

					.u-upload__wrap__preview {
						margin: 0 20rpx 20rpx 0;
					}
				}
			}
		}

		.limit-tips {
			margin-top: 29rpx;
			// font-family: PingFang;
			font-size: 24rpx;
			line-height: 1;
			letter-spacing: -0.045em;
			color: #808080;
		}

		.radio-button {
			background-color: #222D49;
			border-radius: 8rpx;
			padding: 18rpx;
			text-align: center;
			transition: all .3s ease-in;

			&--active {
				background-color: #64B7F6;

				.radio-button-label {
					color: #FFFFFF;
				}
			}

			&-group {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 26rpx;
			}

			&-label {
				// font-family: PingFang;
				font-size: 28rpx;
				line-height: 1;
				letter-spacing: -0.045em;
				color: #AEAEAE;
				transition: all .3s ease-in;
			}
		}

		.textarea {
			padding: 14rpx 0 !important;
			background-color: transparent !important;

			& :deep(.uni-textarea-textarea) {
				color: #eee;
			}
		}

		.input {
			padding: 14rpx 0 !important;
		}

		.actions {
			margin-top: 45rpx;
			padding: 0 24rpx;
		}
	}
</style>